<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
// 需要记住的几个概念：
//
// 一切都是对象
//     函数有多种角色
//     对象是属性的无序集合
//     每一个对象上都有一个__proto__属性
//     每一个函数上都有一个prototype属性
//     原型链研究的是对象属性的查找机制
//     作用链研究的是EC中数据的查找机制
//     闭包一个没有被销毁的执行上下文（栈空间）
// new做了什么，如下：
// (1)在构造器内部创建一个新的对象
//     (2)这个对象内部的prototype属性会被赋值为该构造函数的prototype属性;
//     (3)让构造器中的this指向这个对象
//     (4)执行构造器中的代码
//     (5)如果构造器没有返回对象，则返回上面的创建出来的对象
</script>
<!--<script>-->
<!--    function Fn() {-->
<!--        this.x = 10;-->
<!--        this.y = 20;-->
<!--        this.getX = function() {-->
<!--            console.log(this.x)-->
<!--        }-->
<!--    }-->
<!--    Fn.prototype.getX = function() {-->
<!--        console.log(this.x)-->
<!--    }-->
<!--    Fn.prototype.getY = function() {-->
<!--        console.log(this.y)-->
<!--    }-->
<!--    let f1 = new Fn();-->
<!--    f1.getX();-->
<!--    f1.getY();-->
<!--    console.log('-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;')-->
<!--</script>-->
<script>
    function Fn(num) {
        this.x = this.y = num;
    }
    Fn.prototype = {
        x: 20,
        sum: function() {
            console.log(this.x + this.y)
        }
    }
    Fn.prototype.constructor = Fn;
    let f1 = new Fn(10)
    console.log(f1.sum === Fn.prototype.sum)
    f1.sum();
    Fn.prototype.sum();
    console.log(f1.constructor)
    console.log("====================================")
</script>
<!--<script>-->
<!--    function Fn() {-->
<!--        let a = 1;-->
<!--        this.a = a;-->
<!--    }-->
<!--    Fn.prototype.say = function() {-->
<!--        this.a = 2;-->
<!--    }-->
<!--    Fn.prototype = new Fn();-->
<!--    let f1 = new Fn();-->
<!--    Fn.prototype.b = function() {-->
<!--        this.a = 3;-->
<!--    }-->
<!--    console.log(f1.a)-->
<!--    f1.say();-->
<!--    console.log(f1.a)-->
<!--    f1.b();-->
<!--    console.log(f1.a)-->
<!--    console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>")-->
<!--</script>-->
<!--<script>-->
<!--    function Fn() {-->
<!--        this.x = 10;-->
<!--        this.y = 20;-->
<!--    }-->
<!--    Fn.n = 1000;-->
<!--    Fn.say = function() {-->
<!--        console.log("hello")-->
<!--    }-->
<!--    Fn.prototype.sum = function() {-->
<!--        return this.x + this.y;-->
<!--    }-->
<!--    let f1 = new Fn();-->
<!--    f1.sum();-->
<!--    console.log(f1.sum());-->
<!--    console.log(Fn.prototype == Fn.__proto__);-->
<!--    Fn.sum();-->
<!--    console.log("<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<")-->
<!--</script>-->
<script>
    function C1(name) {
        if (name) {
            this.name = name;
        }
    }

    function C2(name) {
        if (name) {
            this.name = name;
        }
    }

    function C3(name) {
        this.name = name || "Hello";
    }
    C1.prototype.name = "Tom"
    C2.prototype.name = "Tom"
    C3.prototype.name = "Tom"
    console.log((new C1().name) + (new C2().name) + (new C3().name))
</script>

</body>
</html>
